<template>
  <div class="app-container">
  <div class="filter-container">
    <el-input
      v-model="listQuery.name"
      placeholder="搜索应用名称"
      style="width: 220px;"
      class="filter-item"
      @keyup.enter.native="handleFilter"
    />
      <el-select
      v-model="listQuery.brand"
      style="width: 150px"
      class="filter-item"
      filterable
      @change="handleFilter"
    >
      <el-option key label="厂商" value="" />
      <el-option v-for="(v, k) in brand1" :key="k" :label="v" :value="k" />
      
    </el-select>

    <el-select
      v-model="listQuery.status"
      style="width: 150px"
      class="filter-item"
      @change="handleFilter"
    >
      <el-option key label="全部状态" :value="''" />
      <el-option v-for="(v, k) in status_type" :key="k" :label="v" :value="k" />
    </el-select>
    <el-button
     plain size="small"
      v-waves
      class="filter-item"
      type="primary"
      icon="el-icon-search"
      @click="handleFilter"
    >搜索</el-button>
    <el-button
     plain size="small"
      v-waves
      class="filter-item btn"
      type="primary"
      icon="el-icon-refresh"
      @click="handleCancel"
    >重置</el-button>

    <el-button
     plain size="small"
      v-waves
      class="filter-item btn"
      type="success"
      icon="el-icon-plus"
      @click="handleAdd()"
    >添加配置</el-button>

    <el-button
      plain size="small"
      class="filter-item btn"
      type="success"
      @click="showConfigLog()"
    >查看配置修改历史记录</el-button>

  </div>

  <el-table
    :key="tableKey"
    v-loading="listLoading"
    :data="list"
    border
    fit
    highlight-current-row
    style="width: 100%;"
  >
  <el-table-column label="应用名称" min-width="100" align="center" >
      <template slot-scope="{row}">
        <span>{{ row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="包名" min-width="100" align="center" >
      <template slot-scope="{row}">
        <span>{{ row.package }}</span>
      </template>
    </el-table-column>
    <el-table-column label="厂商名称" min-width="100" align="center">
      <template slot-scope="{row}">
        <span>{{ row.brand }}</span>
      </template>
    </el-table-column> 
    <el-table-column label="广告开关" min-width="100" align="center">
      <template slot-scope="{row}">
        <el-switch
          v-model="row.config.open"
          active-text="开"
          inactive-text="关"
          @change="changeStatus(row,'config.open')"
        />
      </template>
    </el-table-column>    
    <el-table-column label="状态" min-width="100" align="center">
      <template slot-scope="{row}">
       <span :class="'span_'+ row.status"> {{ status_type[row.status] }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="操作"
      align="center"
      min-width="100"
      class-name="small-padding fixed-width"
    >
      <template slot-scope="{row}">
        <el-button type="primary" plain size="small" @click="handleUpdate(row)">编辑</el-button>
        <!-- <el-button type="danger" plain size="small" @click="handleDel(row)">删除</el-button> -->
      </template>
    </el-table-column>
  </el-table>

  <pagination
    v-show="total > 0"
    :total="total"
    class="pageShow"
    :page.sync="listQuery.page"
    :limit.sync="listQuery.limit"
    @pagination="getList"
  />
<!-- 广告表单弹窗 -->
  <el-dialog
    title="广告配置"
    :visible.sync="updated"
    width="1200px"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      label-width="120px"
      class="fullwidth"
      enctype="multipart/form-data"
    >
    <el-row :gutter="20">
      
      <el-col :span="12"><div class="grid-content bg-purple">
        <h3>包配置</h3>
        <el-form-item label="软件名称:" prop="name">
          <el-input v-model.trim="temp.name" placeholder="软件名称"/>
          <span> * 软件名称可以重复！</span>
        </el-form-item>
        <el-form-item label="包名:" prop="package">
          <el-input :disabled="dialogStatus == 'update'" v-model.trim="temp.package" placeholder="包名"/>
        </el-form-item>

        <el-form-item label="厂商名称:" prop="brand">
          <el-select
              v-model="temp.brand"
              class="filter-item"
              filterable
            >
            <el-option v-for="(v, k) in brand1" :key="k" :label="v" :value="k" />
            
            </el-select>
            <br/>
            <span>* 这里包名和厂商不能同时和别的配置重复</span>
        </el-form-item>
        
      </div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light">
        <h3>主配置</h3>
          <el-form-item label="首页展示广告:" prop="config.config.loadPage.isHome">
              <el-switch active-text="是"
              inactive-text="否" v-model="temp.config.config.loadPage.isHome" placeholder="首页展示广告" > </el-switch>
          </el-form-item>
          <el-form-item label="落地变现页面:" prop="config.config.loadPage.landingPage">
            <el-input v-model.trim="temp.config.config.loadPage.landingPage" placeholder="变现页面的路径" />
          </el-form-item>
          <el-form-item label="正常页面:" prop="config.config.loadPage.normalPage">
            <el-input v-model.trim="temp.config.config.loadPage.normalPage" placeholder="正常页面的路径" />
          </el-form-item>
          <el-form-item label="审核的版本号:">
            <el-input v-model.trim="temp.review_version" placeholder="审核的版本号,用于规避审核" />
          </el-form-item>

          <el-form-item label="打开广告:" prop="config.open">
              <el-switch  active-text="开"
              inactive-text="关" v-model="temp.config.open" ></el-switch>
              <span class="span_txt"> * 打开变现广告</span>
          </el-form-item>

      </div></el-col>
    </el-row>
      

      <h1>厂商配置</h1>
      <el-row :gutter="20">
        <el-col :span="6" ><div class="grid-content bg-purple bg-purple">
          <h3>顶部广告</h3>

          <el-form-item label="广告开关:" prop="config.brandConfig.topAdConfig.open">
              <el-switch  active-text="开"
              inactive-text="关" v-model="temp.config.brandConfig.topAdConfig.open" ></el-switch>
              <!-- <span class="span_txt"> * 开启顶部广告</span> -->
          </el-form-item>

          <!-- <el-form-item label="广告请求间隔:" prop="config.brandConfig.topAdConfig.intervalSeconds">
            <el-input v-model.number="temp.config.brandConfig.topAdConfig.intervalSeconds" placeholder="间隔几秒重新请求新的" ></el-input>
          </el-form-item>

          <el-form-item label="广告宽度:" prop="config.brandConfig.topAdConfig.width">
            <el-input v-model.number="temp.config.brandConfig.topAdConfig.width" placeholder="广告宽度" ></el-input>
          </el-form-item>
          <el-form-item label="广告高度:" prop="config.brandConfig.topAdConfig.height">
            <el-input v-model.number="temp.config.brandConfig.topAdConfig.height" placeholder="广告高度" ></el-input>
          </el-form-item> -->
          <el-form-item label="展示概率:" prop="config.brandConfig.topAdConfig.rate">
            <el-input v-model.number="temp.config.brandConfig.topAdConfig.rate" placeholder="展示概率" ></el-input>
          </el-form-item>
          <el-form-item label="展示次数:" prop="config.brandConfig.topAdConfig.num">
            <el-input v-model.number="temp.config.brandConfig.topAdConfig.num" placeholder="展示次数" ></el-input>
          </el-form-item>
          <el-form-item label="是否展示:" prop="config.brandConfig.topAdConfig.opacity">
              <el-switch
              active-text="展示"
              inactive-text="透明"
              v-model="temp.config.brandConfig.topAdConfig.opacity"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>

          

        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light bg-purple">
          <h3>模板广告</h3>

          <el-form-item label="广告开关:" prop="config.brandConfig.templateAdConfig.open">
            <el-switch
              active-text="开"
              inactive-text="关"
              v-model="temp.config.brandConfig.templateAdConfig.open" 
            ></el-switch>
          </el-form-item>

          <el-form-item label="展示次数:" prop="config.brandConfig.templateAdConfig.num">
            <el-input v-model.number="temp.config.brandConfig.templateAdConfig.num" placeholder="展示次数" ></el-input>
          </el-form-item>
          <el-form-item label="是否随机:" prop="config.brandConfig.templateAdConfig.random">
                <el-switch
                active-text="是"
                inactive-text="否"
                v-model="temp.config.brandConfig.templateAdConfig.random"
              />
            </el-form-item>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
          <h3>自定义json字符串</h3>

          <el-form-item label="" label-width="0px">
            <span> rootJson 字符串需要压缩</span>
            <el-input type="textarea" v-model="temp.config.rootJson" :rows="4" placeholder="自定义json字符串" />
            
          </el-form-item>

          <el-form-item label="" label-width="0px">
            <span> * 测试配置configJson 需要压缩</span>
            <el-input type="textarea" v-model="temp.config.configJson" :rows="4" placeholder="测试配置configJson" />
          </el-form-item>

          <el-form-item label="" label-width="0px">
            <span> * 测试配置configJsons 需要压缩</span>
            <el-input type="textarea" v-model="temp.config.configJsons" :rows="4" placeholder="测试配置configJsons" />
          </el-form-item>

          <!-- <el-form-item label="广告开关:" prop="config.brandConfig.bannerAdConfig.open">
            <el-switch
              active-text="开"
              inactive-text="关"
              v-model="temp.config.brandConfig.bannerAdConfig.open" 
            ></el-switch>
          </el-form-item>
          <el-form-item label="广告请求间隔:" prop="config.brandConfig.bannerAdConfig.intervalSeconds">
            <el-input v-model.number="temp.config.brandConfig.bannerAdConfig.intervalSeconds" placeholder="间隔几秒重新请求新的" ></el-input>
          </el-form-item> -->
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
          <h3>其他配置</h3>
          <h4>胶囊配置</h4>
          <el-form-item label="胶囊是否可点击:" prop="config.brandConfig.otherConfig.trMenu.click">
              <el-switch
                active-text="开"
                inactive-text="关"
                v-model="temp.config.brandConfig.otherConfig.trMenu.click" 
              ></el-switch>
            </el-form-item>

          <el-form-item label="点胶囊跳广告:" prop="config.brandConfig.otherConfig.trMenu.open">
              <el-switch
                active-text="开"
                inactive-text="关"
                v-model="temp.config.brandConfig.otherConfig.trMenu.open" 
              ></el-switch>
            </el-form-item>

            <el-form-item label="index:" prop="config.brandConfig.otherConfig.trMenu.index">
              <el-input v-model.number="temp.config.brandConfig.otherConfig.trMenu.index" placeholder="index" />
            </el-form-item>
            

            <h4>底部安卓虚拟按钮配置</h4>
            <el-form-item label="虚拟按钮:" prop="config.brandConfig.otherConfig.bottomMenu.open">
              <el-switch
                active-text="开"
                inactive-text="关"
                v-model="temp.config.brandConfig.otherConfig.bottomMenu.open" 
              ></el-switch>
            </el-form-item>
            <el-form-item label="虚拟按钮可点击:" prop="config.brandConfig.otherConfig.bottomMenu.click">
              <el-switch
                active-text="开"
                inactive-text="关"
                v-model="temp.config.brandConfig.otherConfig.bottomMenu.click" 
              ></el-switch>
            </el-form-item>

            <el-form-item label="index:" prop="config.brandConfig.otherConfig.bottomMenu.index">
              <el-input v-model.number="temp.config.brandConfig.otherConfig.bottomMenu.index" placeholder="index" ></el-input>
            </el-form-item>
            
            <h4>原生模板广告概率</h4>
            <el-form-item label="原生模板广告概率:" prop="config.brandConfig.otherConfig.nativeModuleAdvertRate">
              <el-input v-model.number="temp.config.brandConfig.otherConfig.nativeModuleAdvertRate" :min="0" :max="100" placeholder="原生模板广告概率" >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <h4>首先展示广告</h4>
            <el-form-item label="首先展示广告:" prop="config.brandConfig.otherConfig.firstAd">
              <el-select
                  v-model="temp.config.brandConfig.otherConfig.firstAd"
                  class="filter-item"
                  filterable
                >
                <el-option label="原生广告" value="advArray" />
                <el-option label="激励视频" value="videoArray" />
              </el-select>
            </el-form-item>

        </div></el-col>
      </el-row>
      

      <h1>模板广告配置</h1>
      <el-form-item label="" prop="template_ids" label-width="0px">
        <el-button type="primary" size="mini" @click="showTemplate()">添加模板</el-button>
      </el-form-item>
      <el-row >
        <el-col :span="24"><div class="grid-content bg-purple-dark">
          <el-button v-for="(v,i) in temp.template_ids" :key="i" size="mini" >
            {{ template_obj[v] ? template_obj[v].name : '禁用的模板！！！' }}
            <i class="el-icon-error" @click="delTemplate(i)"></i>
          </el-button>
      
        </div></el-col>
      </el-row>

      <h1>拉回配置</h1>
      <el-row  :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple ">
          <h3>应用隐藏拉回</h3>
          <el-form-item label="是否开启操作:" prop="config.PullBack.onHideConfig.open">
            <el-switch
              active-text="开"
              inactive-text="关"
              v-model="temp.config.PullBack.onHideConfig.open" 
            ></el-switch>
          </el-form-item>

          <el-form-item label="拉回代码:" prop="config.PullBack.onHideConfig.pullBack.pull_back_id">
            <el-select
                v-model="temp.config.PullBack.onHideConfig.pullBack.pull_back_id"
                class="filter-item"
                filterable
              >
                <el-option v-for="item in pullBacks" :key="item.pb_id" :label="item.name" :value="item.pb_id" />              
              </el-select>
              <br/>
          </el-form-item>

          <el-form-item label="拉回次数:" prop="config.PullBack.onHideConfig.pullBack.num">
            <el-input  placeholder="拉回次数" v-model.number="temp.config.PullBack.onHideConfig.pullBack.num"></el-input>
          </el-form-item>

          <el-form-item label="拉回概率:" prop="config.PullBack.onHideConfig.pullBack.probability">
            <el-input  placeholder="拉回概率" v-model.number="temp.config.PullBack.onHideConfig.pullBack.probability">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>

          <el-form-item label="拉回延迟:" prop="config.PullBack.onHideConfig.pullBack.time">
            <el-input  placeholder="拉回延迟" v-model.number="temp.config.PullBack.onHideConfig.pullBack.time">
              <template slot="append"> ms </template>
            </el-input>
          </el-form-item>

          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple ">
          <h3>点击广告后拉回</h3>
          <el-form-item label="是否开启操作:" prop="config.PullBack.adClickEventConfig.open">
            <el-switch
              active-text="开"
              inactive-text="关"
              v-model="temp.config.PullBack.adClickEventConfig.open" 
            ></el-switch>
          </el-form-item>
          <el-form-item label="是否跟第二种方式并行:" prop="config.PullBack.adClickEventConfig.parallel">
            <el-switch
              active-text="开"
              inactive-text="关"
              v-model="temp.config.PullBack.adClickEventConfig.parallel" 
            ></el-switch>
          </el-form-item>

          <el-form-item label="拉回代码:" prop="config.PullBack.adClickEventConfig.pullBack.pull_back_id">
            <el-select
                v-model="temp.config.PullBack.adClickEventConfig.pullBack.pull_back_id"
                class="filter-item"
                filterable
              >
                <el-option v-for="item in pullBacks" :key="item.pb_id" :label="item.name" :value="item.pb_id" />              
              </el-select>
              <br/>
          </el-form-item>

          <el-form-item label="拉回次数:" prop="config.PullBack.adClickEventConfig.pullBack.num">
            <el-input  placeholder="拉回次数" v-model.number="temp.config.PullBack.adClickEventConfig.pullBack.num"></el-input>
          </el-form-item>

          <el-form-item label="拉回概率:" prop="config.PullBack.adClickEventConfig.pullBack.probability">
            <el-input  placeholder="拉回概率" v-model.number="temp.config.PullBack.adClickEventConfig.pullBack.probability">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>

          <el-form-item label="拉回延迟:" prop="config.PullBack.adClickEventConfig.pullBack.time">
            <el-input  placeholder="拉回延迟" v-model.number="temp.config.PullBack.adClickEventConfig.pullBack.time">
              <template slot="append"> ms </template>
            </el-input>
          </el-form-item>

          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple ">
            <h2>重启应用配置</h2>

            <el-form-item label="是否重启:" prop="config.restartConfig.restartOpen">
              <el-switch
                active-text="是"
                inactive-text="否"
                v-model="temp.config.restartConfig.restartOpen" 
              ></el-switch>
            </el-form-item>

            <el-form-item label="h5链接:" prop="config.restartConfig.restartH5Url">
              <el-input  placeholder="h5链接" v-model.number="temp.config.restartConfig.restartH5Url"></el-input>
            </el-form-item>

            
            <el-form-item label="重启包" prop="config.restartConfig.restartPackages">
              <el-select v-model="temp.config.restartConfig.restartPackages" multiple placeholder="请选择">
                <el-option
                  v-for="(v, k) in pkgs"
                  :key="k"
                  :label="v"
                  :value="k">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="多久重启:" prop="config.restartConfig.restartTime">
              <el-input  placeholder="多久重启" v-model.number="temp.config.restartConfig.restartTime">
                <template slot="append"> s </template>
              </el-input>
            </el-form-item>

            <el-form-item label="重启次数:" prop="config.restartConfig.restartNum">
              <el-input  placeholder="重启次数" v-model.number="temp.config.restartConfig.restartNum">
              </el-input>
            </el-form-item>

            <el-form-item label="重启的概率:" prop="config.restartConfig.restartRate">
              <el-input  placeholder="重启的概率" v-model.number="temp.config.restartConfig.restartRate">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <h1>获取广告配置</h1>
      <el-row  :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple ">
          <h3>请求广告配置</h3>
          <el-form-item label="第一次预取:" prop="config.firstPrefetching">
            <el-switch
              active-text="是"
              inactive-text="否"
              v-model="temp.config.firstPrefetching" 
            ></el-switch>
          </el-form-item>

          <el-form-item label="消耗后请求:" prop="config.requestConsumption">
            <el-switch
              active-text="是"
              inactive-text="否"
              v-model="temp.config.requestConsumption" 
            ></el-switch>
          </el-form-item>

          <el-form-item label="广告组请求层数:" prop="config.adGroupRequestLayers">
            <el-input  placeholder="广告组请求层数" v-model.number="temp.config.adGroupRequestLayers"></el-input>
          </el-form-item>

          <el-form-item label="目标价并行数:" prop="config.targetParallelCount">
            <el-input  placeholder="目标价并行数" v-model.number="temp.config.targetParallelCount"></el-input>
          </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple ">
          <h3>请求广告错误阈值配置</h3>
          <el-form-item label="阈值开关:" prop="config.thresholdSwitch">
            <el-switch
              active-text="开"
              inactive-text="关"
              v-model="temp.config.thresholdSwitch" 
            ></el-switch>
          </el-form-item>

          <el-form-item label="错误次数阈值:" prop="config.errorThreshold">
            <el-input  placeholder="错误次数阈值" v-model.number="temp.config.errorThreshold"></el-input>
          </el-form-item>

          <el-form-item label="成功次数和错误次数的比例:" prop="config.successErrorRatio">
            <el-input  placeholder="成功次数和错误次数的比例" v-model.number="temp.config.successErrorRatio"></el-input>
          </el-form-item>

          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple ">
            <h3>广告池剩余广告请求</h3>
            <el-form-item label="是否开启:" prop="config.remainingAdRequests.open">
              <el-switch
                active-text="开"
                inactive-text="关"
                v-model="temp.config.remainingAdRequests.open" 
              ></el-switch>
            </el-form-item>
            <el-form-item label="剩余广告数量:" prop="config.remainingAdRequests.num">
              <el-input  placeholder="剩余广告数量" v-model.number="temp.config.remainingAdRequests.num"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-form-item label="状态" prop="status" label-width="80px">
          <el-radio-group v-model="temp.status">
              <el-radio v-for="(v, k) in this.status_type" :label="k">{{ v }}</el-radio>
          </el-radio-group>
      </el-form-item>

      <div style="text-align: right">
        <el-button plain size="small" @click="updated = false">取消</el-button>
        <el-button
         plain size="small"
          type="primary"
          :loading='addloading'
          @click="dialogStatus==='create'?handadd():handupdate()"
        >确定</el-button>
      </div>
    </el-form>
  </el-dialog>
<!-- 模板选择弹窗 -->
  <el-dialog  title="选择模板" :visible.sync="tempVisible" :width="'1000px'" :before-close="handleClose">
        <el-button type="primary" size="mini" @click="addTemplate()">确定选择</el-button>
        <br/><br/>
        <el-table
          ref="multipleTable"
          key="1231"
          :data="template_list"
          border
          fit
          highlight-current-row
          height="600"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="模板id" min-width="100" align="center" >
              <template slot-scope="{row}">
                <span>{{ row.template_id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="模板名称" min-width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="模板图片" min-width="100" align="center">
              <template slot-scope="{row}">
                <el-image 
                  style="height: 50px;"
                  :src="row.completePopImg" 
                  :preview-src-list="[row.completePopImg]">
              </el-image>
              </template>
            </el-table-column>
            <el-table-column label="背景图片" min-width="100" align="center">
              <template slot-scope="{row}">
                <el-image 
                  style="height: 50px;"
                  :src="row.completeBgImg" 
                  :preview-src-list="[row.completeBgImg]">
              </el-image>
              </template>
            </el-table-column>
            <!-- <el-table-column label="按钮文案" align="center">
              <template slot-scope="{row}">
                <span>{{ row.btnStyle.buttonName }}</span>
              </template>
            </el-table-column>   -->
            <!-- <el-table-column label="类型" align="center">
              <template slot-scope="{row}">
                <span>{{ row.temp_type == '1'? "弹框模板": "背景模板" }}</span>
              </template>
            </el-table-column>    -->

            <el-table-column label="展示次数" align="center">
              <template slot-scope="{row}">
                <span>{{ row.show_num }}</span>
              </template>
            </el-table-column> 

            <el-table-column label="点击次数" align="center">
              <template slot-scope="{row}">
                <span>{{ row.click_num }}</span>
              </template>
            </el-table-column> 
            <el-table-column label="点击率" align="center">
              <template slot-scope="{row}">
                <span>{{ (row.click_num / row.show_num * 100).toFixed(2) }} %</span>
              </template>
            </el-table-column> 
        </el-table>
  </el-dialog>

  <el-dialog  title="广告配置修改日志" :visible.sync="show_config_log_visible" :width="'1000px'" :before-close="handleClose2">
      <div class="filter-container">
        <el-select
              v-model="listQuery2.pkg"
              style="width: 100px"
              class="filter-item"
              placeholder="请选择包"
            >
              <el-option label="全部包" :value="''" />
              <el-option v-for="(v, k) in pkgs" :key="k" :label="v" :value="k" />
          </el-select>
            <el-select
            v-model="listQuery2.brand"
            style="width: 150px"
            class="filter-item"
            filterable
            @change="handleFilter"
          >
            <el-option key label="厂商" value="" />
            <el-option v-for="(v, k) in brand1" :key="k" :label="v" :value="k" />
            
          </el-select>

          <el-button
            plain size="small"
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter2"
            >搜索</el-button>
        </div>

        <el-table key="12311" :data="config_log_list" border fit >
          <el-table-column label="包名" min-width="50" align="center" >
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="软件名称" min-width="50" align="center">
              <template slot-scope="{row}">
                <span>{{ row.package }}</span>
              </template>
            </el-table-column>
         
            <el-table-column label="厂商" min-width="50" align="center">
              <template slot-scope="{row}">
                  {{ brand1[row.brand] }}
              </template>
            </el-table-column>
            <el-table-column label="修改内容" min-width="300" align="left">
              <template slot-scope="{row}">
                <div v-html="row.update_content"></div>
              </template>
            </el-table-column>  
            <el-table-column label="修改人" prop="username" min-width="50" align="center"></el-table-column>
            <el-table-column label="修改时间"  min-width="100" align="center">
              <template slot-scope="{row}">
                <span>{{ row.update_time }}</span>
              </template>
            </el-table-column>  
        </el-table>
        <pagination
              v-show="config_log_total > 0"
              :total="config_log_total"
              class="pageShow"
              :page.sync="listQuery2.page"
              :limit.sync="listQuery2.limit"
              @pagination="getConfigLogList"
            />
  </el-dialog>

  
</div>
</template>
<script>
import { 
  getAdvTemplate, 
  getAdvConfig, 
  createAdvConfig, 
  updateAdvConfig, 
  getPullBack,
  getPkgList,
  getConfigLog,
} from "@/api/adv_admin/config.js"
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { Message, MessageBox } from "element-ui";
import { brand1 } from '@/utils/index.js'
export default {
  'name': 'LandingPage',
  components: { Pagination },
  directives: { waves },
  data() {
      return { 
          brand1,
          imageUrl: '',
          tableKey: 0,
          listLoading: false,
          addloading: false,
          dialogWidth: '0px',
          list: [],
          total: 0,
          listQuery: {
              page: 1,
              limit: 20,
              brand: "",
              name: "",
              status: "1",
          },
          rules: {
              brand: [
                  { required: true, message: "必填", trigger: "blur" }
              ],
              name: [
                  { required: true, message: "必填", trigger: "blur" }
              ],
              package: [
                  { required: true, message: "必选", trigger: "blur" }
              ],
              template_ids: [
                  { required: true, message: "模板必选", trigger: "blur" }
              ],
              review_version: [
              ],
              pull_back_first: [
                  { required: true, message: "必选", trigger: "blur" }
              ],
              config:{
                  open: [
                      { required: true, message: "必选", trigger: "blur" }
                  ],
                  adGroupRequestLayers: [
                      { required: true, message: "必选", trigger: "blur" }
                  ],
                  errorThreshold: [
                      { required: true, message: "必选", trigger: "blur" }
                  ],
                  successErrorRatio: [
                      { required: true, message: "必选", trigger: "blur" }
                  ],
                  remainingAdRequests:{
                    num: [
                      { required: true, message: "必选", trigger: "blur" }
                    ]
                  },
                  config: {
                    loadPage:{
                      isHome: [{ required: true, message: "必选", trigger: "blur" }],
                      landingPage: [{ required: true, message: "必选", trigger: "blur" }],
                      normalPage: [{ required: true, message: "必选", trigger: "blur" }],
                    }
                  },
                  brandConfig: {
                    topAdConfig:{
                      open: [{ required: true, message: "必选", trigger: "blur" }],
                      intervalSeconds: [{ required: true, message: "必选", trigger: "blur" }],
                      width: [{ required: true, message: "必选", trigger: "blur" }],
                      height: [{ required: true, message: "必选", trigger: "blur" }],
                      rate: [{ required: true, message: "必选", trigger: "blur" }],
                      num: [{ required: true, message: "必选", trigger: "blur" }],
                      opacity: [{ required: true, message: "必选", trigger: "blur" }],

                    },
                    templateAdConfig:{
                      open: [{ required: true, message: "必选", trigger: "blur" }],
                      num: [{ required: true, message: "必选", trigger: "blur" }],
                      random: [{ required: true, message: "必选", trigger: "blur" }],
                    },
                    bannerAdConfig:{
                      open: [{ required: true, message: "必选", trigger: "blur" }],
                      intervalSeconds: [{ required: true, message: "必填", trigger: "blur" }],
                    },
                    otherConfig:{
                      trMenu:{
                        open: [{ required: true, message: "必选", trigger: "blur" }],
                        index: [{ required: true, message: "必填", trigger: "blur" }],
                        click: [ {required: true, message: "必填", trigger: "blur" }]
                      },
                      bottomMenu:{
                        open: [{ required: true, message: "必选", trigger: "blur" }],
                        click: [{ required: true, message: "必选", trigger: "blur" }],
                        index: [{ required: true, message: "必填", trigger: "blur" }],
                      },
                      nativeModuleAdvertRate: [{ required: true, message: "必选", trigger: "blur" }],
                      firstAd: [{ required: true, message: "必选", trigger: "blur" }]
                    },
                    
                  },
                  PullBack: {
                    onHideConfig: {
                      open: [{ required: true, message: "必选", trigger: "blur" }],
                      pullBack: {
                        pull_back_id: [{ required: true, message: "必选", trigger: "blur" }],
                        num: [{ required: true, message: "必选", trigger: "blur" }],
                        probability: [{ required: true, message: "必选", trigger: "blur" }],
                        time: [{ required: true, message: "必选", trigger: "blur" }]
                      }
                    },
                    adClickEventConfig: {
                      open: [{ required: true, message: "必选", trigger: "blur" }],
                      parallel: [{ required: true, message: "必选", trigger: "blur" }],
                      pullBack: {
                        pull_back_id: [{ required: true, message: "必选", trigger: "blur" }],
                        num: [{ required: true, message: "必选", trigger: "blur" }],
                        probability: [{ required: true, message: "必选", trigger: "blur" }],
                        time: [{ required: true, message: "必选", trigger: "blur" }]
                      }
                    },

                  },
                  restartConfig: {
                    restartH5Url: [{ required: true, message: "必选", trigger: "blur" }], // h5链接
                    restartOpen: [{ required: true, message: "必选", trigger: "blur" }], // 是否重启
                    restartPackages: [{ required: true, message: "必选", trigger: "blur" }], // 重启包 选择多个可投放的应用; 
                    restartTime: [{ required: true, message: "必选", trigger: "blur" }], // 多久重启
                    restartNum: [{ required: true, message: "必选", trigger: "blur" }], // 每天这个包最多重启次数
                    restartRate: [{ required: true, message: "必选", trigger: "blur" }], // 当前重启的概率
                  }
              }
          },
          updated: false,
          update: '',
          dialogStatus: '',
          defConfig: {
              name:null,   // 软件名称
              package: null,   // 包名
              brand: null,      // 厂商
              template_ids:[],  // 广告模板id
              review_version: '',  // 审核版本
              // pull_back_first: '1',  // 拉回代码id 废弃
              config: {
                  open: false, // 广告总开关

                  firstPrefetching : true, //第一次预取 boolean
                  requestConsumption: true , //消耗后请求 boolean
                  adGroupRequestLayers: 1,  //广告组请求层数 number|string
                  targetParallelCount: 3, // 认目标价并行数 默认值 3

                  thresholdSwitch : true, //阈值开关
                  errorThreshold: 100, // 错误次数阈值
                  successErrorRatio: 0.01, // 成功次数和错误次数的比例
                  remainingAdRequests:{  // 广告池剩余广告请求
                    open: true, // 是否开启
                    num: 3   // 
                  },
                  config:{ // 主配置
                    loadPage:{ // 加载页
                      isHome: true, // 是否首页展示广告
                      landingPage: "", // 落地变现页面
                      normalPage: "", // 正常界面
                    }
                  },
                  brandConfig: { // 厂商配置
                    topAdConfig: { // 顶部广告
                      open: true, // 开关
                      // intervalSeconds: 3, // 间隔几秒重新请求新的
                      // width: 247, // 广告宽
                      // height: 88, // 广告高
                      rate: 100, // 展示概率
                      num: 10, // 展示次数
                      opacity: 0, // 0 可看 1 不可看
                    },
                    templateAdConfig:{ // 模板广告
                      open: true, // 开关
                      num: 10, // 展示次数
                      random: true, //是否随机
                    },
                    // bannerAdConfig: { // banner广告
                    //   open: true, // 开关
                    //   intervalSeconds: 3, // 间隔几秒重新请求新的
                    // },
                    otherConfig:{ // 其他配置
                      trMenu: { // 顶部右上角模拟胶囊
                        open: true, // 是否开启点击胶囊跳广告
                        index: 1,
                        click: true  // 胶囊是否可点击
                      },
                      bottomMenu:{ //底部安卓虚拟按钮
                        open: true,
                        click: true, // 是否可点击
                        index: 1,
                      },
                      nativeModuleAdvertRate: 50,// 原生广告概率
                      firstAd: 'advArray',   // 第一个广告 advArray  videoArray
                    }
                  },
                  PullBack:{ // 拉起方式
                    // 应用隐藏拉回
                    onHideConfig:{
                        open: true, // 是否开启操作
                        pullBack: { // 选择拉起方式
                            pull_back_id: '', // 拉回代码id
                            num: 3, // 次数
                            probability: 51, // 概率
                            time: 3000, // 时间,
                        }
                    },
                    // 广告点击后拉回
                    adClickEventConfig:{
                        open: true, // 是否开启操作
                        parallel: true, // 是否跟第二种方式并行
                        pullBack: { // 选择拉起方式
                            pull_back_id: '', // 拉回代码id
                            num: 3, // 次数
                            probability: 51, // 概率
                            time: 3000, // 时间,
                        }
                    },
                },
                // 重启应用配置
                restartConfig:{
                      restartH5Url: '', // h5链接
                      restartOpen: true, // 是否重启
                      restartPackages: [], // 重启包 选择多个可投放的应用; 
                      restartTime: 10, // 多久重启
                      restartNum: 2, // 每天这个包最多重启次数
                      restartRate: 100, // 当前重启的概率
                  },
                rootJson: "", // json字符串，存入的时候需要压缩下
                configJson: "", // 测试老污龟公司的配置
                configJsons: ""
              },
              status: '1'
          },
          status_type:{},
          temp: {},
          bgImgVisible: false,
          bgImgList: [],
          template_obj:{},
          template_list: [],
          tempVisible: false,
          multipleSelection: null,
          pullBacks: [],
          pkgs: {},
          // 广告配置修改历史记录
          show_config_log_visible: false,
          config_log_list: [],
          config_log_total: 0,
          listQuery2 : {
            page: 1,
            limit: 20,
            pkg: '',
            brand: ''
          }
      }
  },
  created(){
    this.temp = JSON.parse(JSON.stringify(this.defConfig))
  },
  mounted(){
      this.getTemp()
      this.getPkgs()
      this.getPulljs()
      this.getList()
      this.setDialogWidth()
  },
  methods: {
      setDialogWidth() {
          const val = document.body.clientWidth;
          const def = 1200; // 默认宽度
          if (val < def) {
              this.dialogWidth = "100%";
          } else {
              this.dialogWidth = def + "px";
          }
      },
      getPkgs(){
        getPkgList().then((res)=>{
          this.pkgs = res.DATA.list
        })
      },
      getPulljs(){
        getPullBack().then(res => {
          if(res.STATUS == 200){
            this.pullBacks = res.DATA.list
          }
        })
      },
      getTemp(){
        getAdvTemplate({status: '1', temp_type: '1'}).then(res => {
            if(res.STATUS == 200){
              this.template_list = res.DATA.list
              for(let i = 0; i < res.DATA.list.length; i++){
                this.template_obj[res.DATA.list[i].template_id] = res.DATA.list[i]
              }
              // console.log(this.template_list)
            }
          })
      },
      getList(){
          this.listLoading = true
          getAdvConfig(this.listQuery).then(res => {
              if (res.STATUS == 200){
                  this.list = res.DATA.list
                  this.total = res.DATA.total
                  this.status_type = res.DATA.status
              }
              this.listLoading = false
          })
          
      },
      handleFilter() {
          this.listQuery.page = 1;
          this.getList();
      },
      handleCancel() {
          this.listQuery.page = 1;
          this.listQuery.name = "";
          this.listQuery.status = "1";
          this.listQuery.brand = "";
          this.getList();
      },
      handleUpdate(row){
          this.updated = true
          // 删除错误的字段，修改后可删除这端代码
          if(row.config.brandConfig.topAdConfig.opactiy || row.config.brandConfig.topAdConfig.opactiy == 0) {
            delete row.config.brandConfig.topAdConfig.opactiy
          }
          
          this.temp = JSON.parse(JSON.stringify(row)) 
          
          this.dialogStatus = 'update'
      },
      handleAdd(){
          this.updated = true
          this.temp = JSON.parse(JSON.stringify(this.defConfig))
          this.dialogStatus = 'create'
      },
      handadd(){
          this.addloading = true
          this.$refs['dataForm'].validate((valid) => {
          if (valid) {
              let data = JSON.parse(JSON.stringify(this.temp)) 
              data.config = JSON.stringify(data.config)
              data.template_ids = JSON.stringify(data.template_ids)
              createAdvConfig(data).then(res => {
                  if (res.STATUS == 200){
                      Message.success('添加成功')
                      this.updated = false
                      this.getList()
                      this.imageUrl = ''
                  }else{
                      
                      Message({
                          message: res.DEC,
                          type: "error",
                          duration: 2000,
                      });
                      // Message.error()
                  }
                  this.addloading = false
              })

          } else {
              console.log('error submit!!');
              this.addloading = false
          }
          });
          // console.log(this.temp)

      },
      handupdate(){
          this.addloading = true
          this.$refs['dataForm'].validate((valid) => {
              if (valid) {
                  let data = JSON.parse(JSON.stringify(this.temp)) 
                  data.config = JSON.stringify(data.config)
                  data.template_ids = JSON.stringify(data.template_ids)
                  updateAdvConfig(data).then(res => {
                      if (res.STATUS == 200){
                          Message.success('修改成功')
                          this.updated = false
                          this.getList()
                          this.imageUrl = ''
                      }else{
                          
                          Message({
                              message: res.DEC,
                              type: "error",
                              duration: 2000,
                          });
                          // Message.error()
                      }
                      this.addloading = false
                      
                  })
              } else {
                  this.addloading = false
              }
          });
          
      },
      changeStatus(item){
          let data = JSON.parse(JSON.stringify(item)) 
          data.config = JSON.stringify(data.config)
          data.template_ids = JSON.stringify(data.template_ids)
          updateAdvConfig(data).then(res => {
              if (res.STATUS == 200){
                  Message.success('修改成功')
                  this.updated = false
              }else{
                  Message({
                      message: res.DEC,
                      type: "error",
                      duration: 2000,
                  });
                  this.getList()
              }
          })
      },
      showTemplate(){
        this.tempVisible = true
        // 显示模板选择的时候选中以前选的模板
        this.$nextTick(() => { 
          for(let i =0; i < this.template_list.length; i++){
            if(this.temp.template_ids.indexOf(this.template_list[i].template_id) > -1 ){
              console.log(this.template_list[i])
              this.$refs['multipleTable'].toggleRowSelection(this.template_list[i]);
            }
          }
        });
      },
      clicktemplate(item){
          this.temp.bgImg = item.popImg
          // console.log(this.temp, item.popImg)
          this.bgImgVisible = false
      },
      addTemplate(){
        // 确定添加模板到变量中， 循环出模板id
        let template_ids = []
        for(let i in this.multipleSelection){
          template_ids.push(this.multipleSelection[i].template_id)
        }
        this.temp.template_ids = template_ids
        this.handleClose()
      },
      delTemplate(index){
        // 删除选择的模板
        this.temp.template_ids.splice(index, 1)
      },
      handleSelectionChange(val) {
        // 选择模板暂存这个变量
        this.multipleSelection = val;
      },
      handleClose(){
        // 关闭模板弹框，清空选项
        this.$refs.multipleTable.clearSelection();
        this.tempVisible = false
        
      },
      // 广告配置修改历史记录
      showConfigLog(){
        this.show_config_log_visible = true
        this.getConfigLogList()
      },
      getConfigLogList(){
        this.loading = true
        getConfigLog(this.listQuery2).then(res => {
          this.config_log_list = res.DATA.list
          this.config_log_total = res.DATA.total
          this.loading = false
        })
      },
      handleClose2(){
        this.show_config_log_visible = false
      },
      handleFilter2(){
        this.getConfigLogList()
      }
  }
}
</script>
<style lang="scss" scoped>
.show-pwd {
position: absolute;
right: 10px;
top: 0;
font-size: 16px;
color: #ccc;
cursor: pointer;
user-select: none;
}
.push {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
margin-left: 5px;
}
.pageHidden {
display: none;
}
.btn {
margin-left: 0;
}
.fullwidth {
width: 1160px;
margin-left: 0;
}
@media (max-width: 550px) {
.pageShow {
  display: none;
}
.pageHidden {
  display: block;
}
}

.order_1{
padding: 2px;
border-radius: 4px;
border: 2px solid #409EFF;
}
.order_2{
  padding: 2px;
border-radius: 4px;
border: 2px solid #7e7d7d;
}
.el-image{
  border: 1px dashed #d9d9d9;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 330px;
  /* height: 180px; */
  /* line-height: 178px; */
  text-align: center;
}
.avatar {
  width: 330px;
  /* height: 178px; */
  display: block;
}
.el-row {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    
  }
  .bg-purple-dark {
    background: #f5f5f5;
  }
  .bg-purple {
    background: #f5f5f5;
  }
  .bg-purple-light {
    background: #f5f5f5;
  }
  .grid-content {
    border-radius: 4px;
    padding: 10px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f5f5f5;
  }
.span_txt{
  padding-left: 10px;
  color: #8c939d;
}
.span_0{
  color: grey;
}
.span_1{
  color: green;
}
.span_2{
  color: red;
}
</style>